<template>
  <div class="page-wrap">
    <div class="page-inner">
    

      <div class="page-ctx-wrap">
        <table class="table-box" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th>国家</th>
              <th>
                <div class="row-box">
                  <div class="row-left">省/地区</div>
                  <div class="row-right">操作</div>
                </div>
              </th>
              <th>
                <div class="row-box">
                  <div class="row-left">城市/州县</div>
                  <div class="row-right">操作</div>
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              class="loop-item"
              :data-id="item.v1_id"
              v-for="(item, index) in flatList"
              :key="index"
            >
              <td data-title="1级信息">
                <el-tag
                  class="cus-tag-item"
                  closable
                  :disable-transitions="false"
                  @close="handleCloseV1(item)"
                >
                  {{ item.v1_name }}
                </el-tag>
              </td>

              <td data-title="2级信息">
                <div class="row-box">
                  <div class="row-left">
                    <el-tag
                      v-if="item.v2_name"
                      class="cus-tag-item"
                      closable
                      :disable-transitions="false"
                      @close="handleCloseV2(item)"
                    >
                      {{ item.v2_name }}
                    </el-tag>
                  </div>
                  <div class="row-right">
                    <!-- 二级是否可新增 -->
                    <template>
                      <input
                        type="text"
                        class="cus-tag-input cus-v2-input"
                        :data-id="item.id"
                        v-if="item.v2_inputVisible"
                        v-model="item.v2_inputValue"
                        :ref="item.v2_ref"
                        size="small"
                        @keyup.enter="handleInputConfirmV2(item)"
                        @blur="handleInputConfirmV2(item)"
                      />

                      <el-button
                        v-else
                        class="button-new-tag"
                        size="small"
                        @click="showInputV2(item)"
                        >+ 新增</el-button
                      >
                    </template>
                  </div>
                </div>
              </td>

              <td data-title="3级信息">
                <div class="row-box" v-if="item.v2_id">
                  <div class="row-left">
                    <template v-if="item.v2_children && item.v2_children.length">
                    </template>
                    <el-tag
                      v-for="(v3, v2_index) in item.v2_children"
                      :key="v3.id"
                      class="cus-tag-item"
                      closable
                      :disable-transitions="false"
                      @close="handleCloseV3(v3)"
                    >
                      {{ v3.name }}
                    </el-tag>
                  </div>
                  <div class="row-right">
                    <!-- 存在二级分类时允许新增 -->
                    <template>
                      <input
                        type="text"
                        class="cus-tag-input cus-v3-input"
                        :data-id="item.id"
                        v-if="item.v3_inputVisible"
                        v-model="item.v3_inputValue"
                        :ref="item.v3_ref"
                        size="small"
                        @keyup.enter="handleInputConfirmV3(item)"
                        @blur="handleInputConfirmV3(item)"
                      />

                      <el-button
                        v-else
                        class="button-new-tag"
                        size="small"
                        @click="showInputV3(item)"
                        >+ 新增</el-button
                      >
                    </template>
                  </div>
                </div>
              </td>
            </tr>

            <!-- 一级分类新增 -->
            <tr>
              <td>
                <input
                  type="text"
                  class="cus-tag-input cus-v1-input"
                  v-if="add_inputVisible"
                  v-model="add_inputValue"
                  ref="add_saveTagInput"
                  size="small"
                  @keyup.enter="add_handleInputConfirm()"
                  @blur="add_handleInputConfirm()"
                />

                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="add_showInput()"
                  >+ 新增</el-button
                >
              </td>
              <td>-</td>
              <td>-</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "news",
  components: {},
  data() {
    return {
      flatList: [], // 一层接口
      flatNameMap: {}, // id => name
      dataList: [], // tree 树形结构
      add_inputVisible: false,
      add_inputValue: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.setView();
  },
  mounted() {},
  methods: {
    setView() {
      this.$api({
        url: "/app/user/tags/userTagList",
        method: "get",
        data: {
          type: 1, //  1 地区 2职业 3座驾 4播客 5个人主页
          // page: 1,
          // pageNum: 100,
        },
      }).then((res) => {
        console.warn("获取分类配置", res);
        if (res.code == 200) {
          let flatList = [];
          let flatNameMap = {};
          let flatGroupIdArr = [];
          res.data.forEach((v1) => {
            flatNameMap[v1.id] = v1.name;
            v1.deep = 1;
            v1.id_path = [v1.id];

            if (!v1.children || !v1.children.length) {
              flatList.push({
                deep: v1.deep,
                id: v1.id,
                name: v1.name,
                v1_name: v1.name,
                v1_id: v1.id,
                v2_inputVisible: false,
                v2_inputValue: "",
                v2_ref: "",
                v3_inputVisible: false,
                v3_inputValue: "",
                v3_ref: "",
              });
              if (flatGroupIdArr.includes(v1.id)) {
              } else {
                flatGroupIdArr.push(v1.id);
              }
            }

            if (v1.children) {
              v1.children.forEach((v2) => {
                flatNameMap[v2.id] = v2.name;
                v2.deep = 2;
                v2.id_path = [v1.id, v2.id];

                if (!v2.children || !v2.children.length) {
                  flatList.push({
                    deep: v2.deep,
                    id: v2.id,
                    name: v2.name,
                    v1_name: v1.name,
                    v2_name: v2.name,
                    v1_id: v1.id,
                    v2_id: v2.id,

                    v2_inputVisible: false,
                    v2_inputValue: "",
                    v2_ref: "",
                    v3_inputVisible: false,
                    v3_inputValue: "",
                    v3_ref: "",
                  });

                  if (flatGroupIdArr.includes(v1.id)) {
                  } else {
                    flatGroupIdArr.push(v1.id);
                  }
                }

                if (v2.children) {
                  flatList.push({
                    v2_children: v2.children || [],
                    deep: v2.deep,
                    id: v2.id,
                    name: v2.name,
                    v1_name: v1.name,
                    v2_name: v2.name,
                    v1_id: v1.id,
                    v2_id: v2.id,

                    v2_inputVisible: false,
                    v2_inputValue: "",
                    v2_ref: "",
                    v3_inputVisible: false,
                    v3_inputValue: "",
                    v3_ref: "",
                  });

                  if (flatGroupIdArr.includes(v1.id)) {
                  } else {
                    flatGroupIdArr.push(v1.id);
                  }

                  // v2.children.forEach((v3) => {
                  //   flatNameMap[v3.id] = v3.name;
                  //   v3.deep = 3;
                  //   v3.id_path = [v1.id, v2.id, v3.id];

                  //   flatList.push({
                  //     deep: v3.deep,
                  //     id: v3.id,
                  //     name: v3.name,
                  //     v1_name: v1.name,
                  //     v2_name: v2.name,
                  //     v3_name: v3.name,
                  //     v1_id: v1.id,
                  //     v2_id: v2.id,
                  //     v3_id: v3.id,
                  //     v2_inputVisible: false,
                  //     v2_inputValue: "",
                  //     v2_ref: "",
                  //     v3_inputVisible: false,
                  //     v3_inputValue: "",
                  //     v3_ref: "",
                  //   });

                  //   if (flatGroupIdArr.includes(v1.id)) {
                  //   } else {
                  //     flatGroupIdArr.push(v1.id);
                  //   }
                  // });
                }
              });
            }

            v1.inputVisible = false;
            v1.inputValue = "";
            v1.ref = "saveTagInput" + v1.id;
          });

          console.table(JSON.parse(JSON.stringify(flatList)));
          console.table(JSON.parse(JSON.stringify(flatNameMap)));
          console.table(flatGroupIdArr);

          this.flatList = flatList;
          this.flatNameMap = flatNameMap;
          this.dataList = res.data;
        }
      });
    },

    handleCloseV1(item) {
      this.$api({
        url: "/app/user/tags/" + item.v1_id,
        method: "delete",
        data: {},
      }).then((res) => {
        if (res.code == 200) {
          this.setView();
        }
      });
    },

    handleCloseV2(item) {
      this.$api({
        url: "/app/user/tags/" + item.v2_id,
        method: "delete",
        data: {},
      }).then((res) => {
        if (res.code == 200) {
          this.setView();
        }
      });
    },

    handleCloseV3(item) {
      console.warn({ ...item });
      this.$api({
        url: "/app/user/tags/" + item.id,
        method: "delete",
        data: {},
      }).then((res) => {
        if (res.code == 200) {
          this.setView();
        }
      });
    },

    showInputV2(item) {
      console.warn("分组", { ...item });
      item.v2_inputVisible = true;

      this.$nextTick((_) => {
        // console.warn("输入框", this.$refs[v1.ref]);
        // console.warn("输入框", this.$refs[v1.ref].$refs.input);
        // this.$refs[v1.ref].$refs.input.focus();

        // this.$refs[v1.ref].focus();

        let dom = document.querySelector('.cus-v2-input[data-id="' + item.id + '"]');
        console.warn("dom", dom);
        if (dom) {
          dom.focus();
        }
      });
    },
    showInputV3(item) {
      console.warn("分组", { ...item });
      item.v3_inputVisible = true;

      this.$nextTick((_) => {
        // console.warn("输入框", this.$refs[v1.ref]);
        // console.warn("输入框", this.$refs[v1.ref].$refs.input);
        // this.$refs[v1.ref].$refs.input.focus();

        // this.$refs[v1.ref].focus();

        let dom = document.querySelector('.cus-v3-input[data-id="' + item.id + '"]');
        console.warn("dom", dom);
        if (dom) {
          dom.focus();
        }
      });
    },

    showInput(v1) {
      console.warn("分组", { ...v1 });
      v1.inputVisible = true;

      this.$nextTick((_) => {
        // console.warn("输入框", this.$refs[v1.ref]);
        // console.warn("输入框", this.$refs[v1.ref].$refs.input);
        // this.$refs[v1.ref].$refs.input.focus();

        // this.$refs[v1.ref].focus();

        let dom = document.querySelector('.cus-v2-input[data-id="' + v1.id + '"]');
        console.warn("dom", dom);
        if (dom) {
          dom.focus();
        }
      });
    },

    // 新增二级
    async handleInputConfirmV2(item) {
      let inputValue = item.v2_inputValue.trim();
      if (inputValue) {
        // this.dynamicTags.push(inputValue);
        //新增当前分类
        // api;

        let has_same_name = this.flatList.find(
          (v) => v.v1_id == item.v1_id && v.v2_name == inputValue
        );

        if (has_same_name) {
          alertErr("当前分类名称已存在！");
        } else {
          let res_add = await this.$api({
            url: "/app/user/tags",
            method: "get",
            data: {
              name: inputValue, //名称
              type: 1, //类型 1 地区 2职业 3座驾 4播客 5个人主页
              selfFlag: "0", //0公开/1私人
              selfId: "", //self_flag = 1 此字段为所属用户id
              parentId: item.v1_id, //父级id
              remark: "", //备注 播客/主页则是资源url
            },
          });

          if (res_add.code == 200) {
            this.setView();
          }
        }
      }
      item.v2_inputVisible = false;
      item.v2_inputValue = "";
    },
    // 新增3级
    async handleInputConfirmV3(item) {
      let inputValue = item.v3_inputValue.trim();
      if (inputValue) {
        // this.dynamicTags.push(inputValue);
        //新增当前分类
        // api;

        let has_same_name = this.flatList.find(
          (v) => v.v1_id == item.v1_id && v.v3_name == inputValue
        );

        if (has_same_name) {
          alertErr("当前分类名称已存在！");
        } else {
          let res_add = await this.$api({
            url: "/app/user/tags",
            method: "get",
            data: {
              name: inputValue, //名称
              type: 1, //类型 1 地区 2职业 3座驾 4播客 5个人主页
              selfFlag: "0", //0公开/1私人
              selfId: "", //self_flag = 1 此字段为所属用户id
              parentId: item.v2_id, //父级id
              remark: "", //备注 播客/主页则是资源url
            },
          });

          if (res_add.code == 200) {
            this.setView();
          }
        }
      }
      item.v3_inputVisible = false;
      item.v3_inputValue = "";
    },

    async handleInputConfirm(v1) {
      let inputValue = v1.inputValue.trim();
      if (inputValue) {
        // this.dynamicTags.push(inputValue);
        //新增当前分类
        // api;

        let has_same_name = v1.children.find((v) => v.name == inputValue);

        if (has_same_name) {
          alertErr("当前分类名称已存在！");
        } else {
          let res_add = await this.$api({
            url: "/app/user/tags",
            method: "get",
            data: {
              name: inputValue, //名称
              type: 1, //类型 1 地区 2职业 3座驾 4播客 5个人主页
              selfFlag: "0", //0公开/1私人
              selfId: "", //self_flag = 1 此字段为所属用户id
              parentId: v1.id, //父级id
              remark: "", //备注 播客/主页则是资源url
            },
          });

          if (res_add.code == 200) {
            this.setView();
          }
        }
      }
      v1.inputVisible = false;
      v1.inputValue = "";
    },

    // 新增一级分类
    add_showInput() {
      this.add_inputVisible = true;

      this.$nextTick((_) => {
        let dom = document.querySelector(".cus-v1-input");
        console.warn("dom", dom);
        if (dom) {
          dom.focus();
        }
      });
    },
    async add_handleInputConfirm() {
      let inputValue = this.add_inputValue.trim();
      if (inputValue) {
        // this.dynamicTags.push(inputValue);
        // 新增当前分类
        // api;
        let has_same_name = this.dataList.find((v) => v.name == inputValue);
        if (has_same_name) {
          alertErr("当前分类名称已存在！");
        } else {
          let res_add = await this.$api({
            url: "/app/user/tags",
            method: "get",
            data: {
              name: inputValue, //名称
              type: 1, //类型 1 地区 2职业 3座驾 4播客 5个人主页
              selfFlag: "0", //0公开/1私人
              selfId: "", //self_flag = 1 此字段为所属用户id
              parentId: "", //父级id
              remark: "", //备注 播客/主页则是资源url
            },
          });
          if (res_add.code == 200) {
            this.setView();
          }
        }
      }
      this.add_inputVisible = false;
      this.add_inputValue = "";
    },

    // 新增一级分类
  },
};
</script>

<style scoped lang="less">
.page-wrap {
  .page-inner {
  }
}

.page-ctx-wrap {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
}

// 隔开操作栏
.row-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .row-left {
    flex: 1;
    overflow: hidden;
  }
  .row-right {
    min-width: 80px;
    text-align: center;
  }
}

// 标签样式
.cus-tag-item {
  margin-right: 15px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.cus-tag-input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  outline: 0;
  padding: 0 15px;
  width: 90px;
  height: 32px;
  line-height: 32px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  &:focus {
    border-color: #66b1ff;
  }
}

// 标签样式

.table-box {
  width: 100%;
  border-collapse: 0;
  /* table-layout: fixed; */
  border: 1px solid #eee;
  font-size: 14px;
}
.table-box tr {
  /* min-height: 40px; */
}
.table-box th {
  text-align: left;
  padding: 10px 10px;

  border-right: 1px solid #eee;
}
.table-box td {
  text-align: left;
  padding: 10px 10px;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
}
.table-box td:nth-child(1) {
  width: 20%;
}
.table-box td:nth-child(2) {
  width: 20%;
}
.table-box td:nth-child(3) {
  width: 60%;
}

.table-box .tag-item {
  cursor: pointer;
  outline: none;
  user-select: none;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  color: #333;
}

.table-box .tag-item:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 3px;
}

.table-box .tag-item.checked:before {
  background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
}
</style>
